<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>input输入框展开动画</title>
	</head>
	
	<style>
		.mb20 {
			margin-bottom: 20px;
		}
		body {
			overflow: hidden;
			background: #222;
		}
		.input-box {
			position: relative;
			display: inline-block;
		}
		.input {
			padding: 0 40px 0 20px;
			width: 160px;
			height: 38px;
			font-size: 14px;
			border: 1px solid #eee;
			border-radius: 40px;
			background: #eee;
			transition: width .5s;
			transition-delay: .1s;
		}

		.span {
			position: absolute;
			top: 4px;
			right: 5px;
			width: 30px;
			height: 30px;
			line-height: 30px;
			padding: 0;
			color: #969696;
			text-align: center;
			background: #222;
			border-radius: 50%;
			font-size: 15px;
			cursor: pointer;
		}

		.input:focus {
			width: 280px;
			outline: none;
			box-shadow: none;
		}
		.input:focus+.span {
			background-color: pink;
			color: #fff;
		}
		/* 第二个 */
		.btn-box {
			color: #fff;
			width: auto;
			border-radius: 25px;
			min-width: 50px;
			height: 50px;
			line-height: 50px;
			display: inline-block;
			position: relative;
			overflow: hidden;
			background-image: linear-gradient(315deg, #6772FF 0, #00F9E5 100%);
			background-size: 104% 104%;
			cursor: pointer;
		}
		.btn-box span {
			position: absolute;
			right: 0;
			top: 0;
			width: 50px;
			height: 50px;
			text-align: center;
			font-size: 18px;
			cursor: pointer;
		}
		.btn-box input {
			display: inline-block;
			background: 0 0;
			border: none;
			color: #fff;
			padding-left: 20px;
			line-height: 50px !important;
			height: 50px;
			box-sizing: border-box;
			vertical-align: 4px;
			font-size: 16px;
			width: 50px;
			transition: all .3s ease-in-out;
			font-style: italic;
			text-transform: uppercase;
			letter-spacing: 5px;
		}
		.btn-box:hover input,
		.btn-box input:not(:placeholder-shown) {
			display: inline-block;
			width: 160px;
			padding-right: 50px
		}

		/* 第三个 */
		.input-boxLine {
			position: relative;
			width: 160px;
			height: 40px;
			margin-top: 10px;
		}
		.input-boxLine input {
			width: 100%;
			height: 100%;
			border: none;
			font-size: 17px;
			border-bottom: 1px solid #afaebd;
			color: #fff;
			font-style: italic;
			text-transform: uppercase;
			letter-spacing: 5px;
		}
		.input-boxLine span {
			position: absolute;
			bottom: 10px;
			left: 0px;
			color: #afaebd;
			pointer-events: none;
			transition: all 0.3s ease;
		}
		.input-boxLine .line {
			position: absolute;
			bottom: 0px;
			height: 2px;
			width: 100%;
			background-color: #ffaa7f;
			transform: scaleX(0);
			transition: all 0.3s ease;
		}
		.input-boxLine input:focus~span,
		.input-boxLine input:valid~span {
			top: -10px;
			font-size: 12px;
			color: #ffaa7f;
			font-style: oblique;
		}
		.input-boxLine input:focus~.line,
		.input-boxLine input:valid~.line {
			transform: scaleX(1);
		}
	</style>

	<body>
		<div>
			<section>
				<div class=" input-box mb20">
					<input type="text" class="input" />
					<span class="span">搜</span>
				</div>
			</section>
			<section>
				<div class="btn-box mb20">
					<span>搜</span>
					<input type="text" placeholder=" " />
				</div>
			</section>
			<section>
				<div class="input-boxLine" data-span='苏苏小苏苏'>
					<input type="text" required />
					<div class="line"></div>
					<span>请输入搜索内容</span>
				</div>
			</section>
		</div>
	</body>
</html>

